<link href="${rc.getContextPath()}/manage/css/dwzCustomCss/dwz.custom.css?v=${ver}" rel="stylesheet" type="text/css">
<script src="${rc.getContextPath()}/manage/js/echarts/echarts.js" type="text/javascript"></script>
<style>
#moreCondition {border：1px;
	width: 200px;
	height: 200px;
	float: center;
}

.poStatus .panel .panelHeader {
	margin: 0px;
	border-width: 0px 0px 1px 0px;
	background-color: #fff;
	background-image: none;
	padding-width: 0px;
}

.poStatus .panel .panelHeaderContent h1 {
	border-width: 0px;
}

.orderStateTable tr td {
	text-align: left;
	overflow: hidden;
	padding: 0px 10px;
	vertical-align: middle;
	line-height: 22px;
	height: 22px;
	border-top: solid 1px #f7f7f7;
	border-right: solid 1px #ededed;
}

.orderStateTable tbody tr:first-child td {
	border-top: 0px;
}

.orderStateTable tr td:first-child {
	border-top: solid 1px #f7f7f7;
	border-left: solid 1px #ededed;
	border-right: solid 1px #ededed;
}

.orderStateTable {
	border-bottom: solid 1px #ededed;
}

.orderStateTable tr th:first-child {
	border-color: #DFE4E8;
	border-style: solid;
	border-width: 1px;
}

.orderStateTable tr th {
	text-align: left;
	padding: 0px 10px;
	border-style: solid;
	border-width: 1px 1px 1px 0px;
	white-space: nowrap;
	line-height: 30px;
	border-color: #DFE4E8;
	background-color: #FAFCFC;
	color: #797E80;
	font-weight: bold;
	height: 26px;
}
</style>
<#include "/common/pagerForm.html">
<form name="requirementCondition" rel="pagerForm" method="post" class="required-validate" onsubmit="return navTabSearch(this)">
	<!-- <input id="testId" name = "ssssss\\.ssss" type="text">
	<input id="ssssss\\.ssss" type="text" /> -->
	<div class="pageHeader">
		<div class="searchBar poStatus">
			<ul class="searchContent">
				<li>
					<label> <@label key='materialCode.C,colon'>物料编号：</@label> </label> 
					<input type="text" name="materialCode" value="${condition.materialCode!''}" />
				</li>
				<li>
					<label> <@label key='workCenterCode.C,colon'>工作中心编号：</@label> </label> 
					<input type="text" name="workcenterCode" value="${condition.workcenterCode!''}" />
				</li>
				<li>
					<label> <@label key='workUnitCode.C,colon'>作业单元编号：</@label> </label> 
					<input type="text" name="workunitCode" value="${condition.workunitCode!''}" />
				</li>
			</ul>
			<ul class="searchContent">
				<li>
					<label> <@label key='theLine.C,WarehouseCode.C,colon'>线边仓库编号：</@label> </label> 
					<input type="text" name="warehouseCode" value="${condition.warehouseCode!''}" />
				</li>
				<li>
					<label> <@label key='theLine.C,storageLocationCode.C,colon'>线边库位编号：</@label> </label> 
					<input type="text" name="storageLocationCode" value="${condition.storageLocationCode!''}" />
				</li>
				<li>
					<label> <@label key='distributionUser.C,colon'>配送人员：</@label> </label> 
					<input type="text" name="distributionUser" value="${condition.distributionUser!''}" />
				</li>
			</ul>
			<ul class="searchContent">
				<li>
					<label> <@label key='createDateTime.C,colon'>创建日期从：</@label> </label> 
					<input type="text" class="date from" dateGroup="createDate" readonly="readonly" size="17" format="yyyy-MM-dd" name="minCreateDateTime" value="${condition.minCreateDateTime!''}" /> 
					<a class="inputDateButton" href="javascript:;">选择</a></li>
				<li>
					<label> <@label key="to.C,colon">至：</@label> </label> 
					<input type="text" class="date to" dateGroup="createDate" readonly="readonly" size="17" format="yyyy-MM-dd" name="maxCreateDateTime" value="${condition.maxCreateDateTime!''}" /> 
					<a class="inputDateButton" href="javascript:;">选择</a></li>
				<li class="query">
					<div class="buttonActive">
						<div class="buttonContent">
							<button type="submit"><@label key='query.B'>查询</@label></button>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
</form>
<div class="panel">
	<h1 style="text-align: left;"><@label key="graph.D">图表</@label></h1>
	<div id="chartContent" class="poStatus" layoutH="148">
		<div layoutH="150" style="float: left; display: block; margin-left: 10px; min-height: 330px;">
			<div>
				<div style="height: 36px;">
					<h1 style="line-height: 36px; color: #666; font-size: 12px;"><@label key="RequirementStatus.C">需求状态</@label></h1>
				</div>
				<table class="orderStateTable" id="orderStateTable" width="388px">
					<thead>
						<tr>
							<th width="30%"><@label key="RequirementStatus.C">需求状态</@label></th>
							<th width="30%"><@label key="quantity.C">数量</@label></th>
							<th width="30%"><@label key="percentage.C">百分比</@label></th>
						</tr>
					<tbody>
						<#if statusECodes??> <#list statusECodes as ecode>
						<tr>
							<td><a name="requirementStatus" class="link" status="${ecode.eCode!''}">${ecode.eCodeText!''}</a></td>
							<td name="requirementStatusCount">${requirementStatusMap[ecode.eCode]!0}</td>
							<td><#if requirementStatusMap.totalCount == 0> 0% <#else> ${((requirementStatusMap[ecode.eCode]!0) / requirementStatusMap.totalCount!1)?string.percent}
								</#if></td>

						</tr>
						</#list> </#if>
						<tr>
							<td><@label key="totalCount.C">合计</@label></td>
							<td>${requirementStatusMap.totalCount}</td>
							<td><#if requirementStatusMap.totalCount == 0> 0% <#else> 100% </#if></td>
						</tr>
					</tbody>
				</table>
			</div>
			<div>
				<div style="height: 36px;">
					<h1 style="line-height: 36px; color: #666; font-size: 12px;"><@label key="overtimeRequirement.C">配送超时的需求</@label></h1>
				</div>
				<table class="orderStateTable" id="unConfirmOrderTable" width="388px">
					<thead>
						<tr>
							<th width="40%"><@label key="quantity.C">数量</@label></th>
							<th width="40%"><@label key="percentage.C">百分比</@label></th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td><a href="javascript:void(0);" class="link" id="overtimeRequirementCount">${requirementStatusMap['overtimeCount']!0}</a></td>
							<td><#if requirementStatusMap.totalCount == 0> 0% <#else> ${((requirementStatusMap['overtimeCount']!0)/requirementStatusMap.totalCount!1)?string.percent}
								</#if></td>
						</tr>
					</tbody>
				</table>

			</div>
		</div>
		<div style="margin-left: 446px; padding: 10px;">
			<div id="chartHolder" style="width: 450px; height: 360px;"></div>
		</div>
	</div>
</div>
<script type="text/javascript">
	(function($) {
		var $page = DWZ.context(), statusData = new Array(), statusName = new Array(), axisLine = { //图表坐标轴线
			show: true,
			lineStyle: {
				color: '#666',
				type: 'solid',
				width: 1
			}
		}, viewRequirements = function(status, text) {
			var $form = $("form[name='requirementCondition']", $page), data = $form.serialize(), 
			path = hostUrl + "/requirementStatus/viewRequirementsByStatus?" + data, title = "配送超时";
			if (status) {
				title = text;
				path += ('&statusECode=' + (status || ''));
			}
			$.pdialog.open(path, '', title, {
				width: 860,
				height: 560,
				minable: false,
				mask: true,
				resizable: false
			});
		};

		$('td a[name=requirementStatus]', $page).on('click', function() {
			var $this = $(this);
			viewRequirements($this.attr('status'), $this.text());
			return false;
		}).each(function() {
			statusName.push($(this).text());
		});

		$('#overtimeRequirementCount', $page).on('click', function() {
			viewRequirements($(this).attr('status'));
			return false;
		});

		$("td[name='requirementStatusCount']", $page).each(function() {
			statusData.push($(this).text());
		});

		var ops = {
			color: ['#93d1f8', '#dea2ad'],
			title: {
				text: '<@label key="RequirementStatus.C">需求状态</@label>',
				x: 'center',
				textStyle: {
					fontSize: 12,
					color: '#666'
				}
			},
			tooltip: {
				trigger: 'item'
			},
			grid: {
				borderWidth: 0,
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			animation: false,
			xAxis: [{
				type: 'category',
				show: true,
				axisLabel: {
					show: true
				},
				axisLine: axisLine,
			}],
			yAxis: [{
				type: 'value',
				show: true,
				axisLine: axisLine
			}],
			series: [{
				type: 'bar',
				itemStyle: {
					normal: {
						label: {
							show: true,
							symbol: 'diamond',
							position: 'top',
							formatter: '{c}',
							textStyle: {
								fontSize: 12,
								color: '#71c76e',
							}
						},
					}
				},
				markPoint: {
					tooltip: {
						trigger: 'item',
						backgroundColor: 'rgba(0,0,0,0)',
					},
					data: []
				}
			}],
			noDataLoadingOption: {
				text: "<@label key='productionOrderStatus.C,noData.C'>订单状态暂无数据</@label>",
				effect: 'whirling',
			}
		};

		require.config({
			paths: {
				echarts: '${rc.getContextPath()}/manage/js/echarts'
			}
		});

		require(['echarts', 'echarts/chart/bar'], function(ec) {
			var myChart = ec.init($('#chartHolder', $page)[0]);
			ops.xAxis[0].data = statusName;
			ops.series[0].data = statusData;
			myChart.setOption(ops, true);
			var imgData = myChart.getDataURL();
		});
	})(jQuery);
</script>



